import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./index.css";
import Drawer from "../Drawer";
export default class Navgator extends Component {
  state = { active: [1, 0, 0], active2: [0, 1, 0] };
  changeChart = (e) => {
    console.log(e.target.id);
    let activeId = e.target.id;
    let tempArr = this.state.active;
    let newArr = tempArr.map(() => {
      return 0;
    });
    newArr[activeId] = 1;
    this.setState({ active: newArr });
    let temp = e.target.value;
    switch (temp) {
      case "boxmap":
        return PubSub.publish("boxmap", e.target.value);
      case "treemap":
        return PubSub.publish("treemap", e.target.value);
      case "nodemap":
        return PubSub.publish("nodemap", e.target.value);
      default:
        return;
    }
  };
  changeColor = (e) => {
    this.props.changeColor(e.target.id);
    let { active2 } = this.state;
    let newArr2 = active2.map(() => {
      return 0;
    });
    switch (e.target.id) {
      case "#1e1e1e":
        newArr2[0] = 1;
        break;
      case "#fff":
        newArr2[1] = 1;
        break;
      case "#1d1e2c":
        newArr2[2] = 1;
        break;
      default:
        break;
    }
    this.setState({ active2: newArr2 });
  };
  open = () => {
    PubSub.publish("open", true);
  };
  render() {
    let colorArr = [
      { name: "深色背景", value: "#1e1e1e" },
      { name: "浅色背景", value: "#fff" },
      { name: "高对比背景", value: "#1d1e2c" },
    ];
    let navButton = [
      { name: "切换box chart", id: 0, value: "boxmap" },
      { name: "切换tree chart", id: 1, value: "treemap" },
      { name: "切换node chart", id: 2, value: "nodemap" },
    ];
    const { active, active2 } = this.state;
    return (
      <div className="all">
        <div className="navbar">
          {navButton.map((item) => {
            return (
              <button
                key={item.id}
                onClick={this.changeChart}
                value={item.value}
                id={item.id}
                style={{
                  background: active[item.id]
                    ? "linear-gradient(to bottom, #c2a8ff, #8860d9)"
                    : "#f1f1f1",
                }}
              >
                {item.name}
              </button>
            );
          })}
          <div className="dropdown">
            <button className="dropbtn">切换主题颜色</button>
            <div className="dropdown-content">
              {colorArr.map((item, index) => {
                return (
                  <div
                    key={index}
                    onClick={this.changeColor}
                    id={item.value}
                    style={{
                      background: active2[index]
                        ? "linear-gradient(to bottom, #c2a8ff, #8860d9)"
                        : "#f1f1f1",
                    }}
                  >
                    {item.name}
                  </div>
                );
              })}
            </div>
          </div>
          <div>
            <button onClick={this.open}>查看具体依赖图</button>
            <Drawer></Drawer>
          </div>
        </div>
      </div>
    );
  }
}
